<template>
  <el-row>
    <el-form-item label="地址">
      <el-input :value="setDefaultValue(activeData.__config__.defaultValue)" placeholder="请输入地址"
        @input="onDefaultValueInput" />
    </el-form-item>
    <el-form-item label="高度">
      <el-input v-model="activeData.height" placeholder="请输入字符长度" type="number">
        <template slot="append">px</template>
      </el-input>
    </el-form-item>
    <el-form-item label="嵌入报表">
      <el-switch v-model="activeData.__config__.isReport" @change='changeStatus'/>
    </el-form-item>
    <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.__config__.noShow" />
    </el-form-item>
    <el-divider>设置参数</el-divider>
    <div v-for="(item, index) in activeData.__config__.regList" :key="index" class="reg-item">
      <span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
        <i class="el-icon-close" />
      </span>
      <el-form-item label="参数名">
        <el-input v-model="item.paramName" placeholder="请输入参数名" />
      </el-form-item>
      <el-form-item label="参数值" style="margin-bottom:0">
        <el-input v-model="item.fieldName" placeholder="请输入字段名" />
      </el-form-item>
    </div>
    <div class="mt-10">
      <el-dropdown>
        <el-button type="primary">选择参数<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="addHandle(item)" v-for="(item,i) in list" :key="i">
            {{item.label}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-row>
</template>
<script>
import comMixin from './mixin';
export default {
  props: ['activeData','fields'],
  mixins: [comMixin],
  data() {
    return {
      treeData: [],
    }
  },
  created() { 
    this.getTree()
    if(this.treeData.length>=1){
      
      
    }
  },
  watch:{
    fields:(newVal, oldVal) => {
      console.log('监听引用类型数据fields')
      console.log('new', newVal)
      console.log('old', oldVal)
      let _this = this
      _this&&_this.getTree()
    }
  },
  computed:{
    list:function(){
      return this.treeData.length>=1?this.treeData[0].children:[]
    }
  },
 
  methods: {
    changeStatus(v){

    },
    addHandle(row) {
      // debugger
      this.activeData.__config__.regList.push({
        paramName: row.value,
        fieldName: row.value
      })
    },
    getTree() {
      let list = [
      {
          value: 'F_ID',
          label: '主键ID',
          children: []
        }
      ]
      const loop = (data, parent) => {
        if (!data) return
        if (data.__config__ && data.__config__.jnpfKey !== 'table' && data.__config__.children && Array.isArray(data.__config__.children)) {
          loop(data.__config__.children, data)
        }
        if (Array.isArray(data)) data.forEach(d => loop(d, parent))
        if (data.__vModel__) {
          if (data.__config__.jnpfKey === 'table') {
            let item = {
              value: data.__vModel__,
              label: data.__config__.label,
              children: []
            }
            let children = []
            if (data.__config__.children && Array.isArray(data.__config__.children) && data.__config__.children.length) {
              for (let i = 0; i < data.__config__.children.length; i++) {
                const child = data.__config__.children[i]
                if (child.__vModel__) {
                  children.push({ value: data.__vModel__ + '.' + child.__vModel__, label: child.__config__.label })
                }
              }
            }
            item.children = children
            list.push(item)
          } else {
            list.push({ value: data.__vModel__, label: data.__config__.label })
          }
        }
      }
      loop(this.fields)
      let topItem = {
        value: +new Date(),
        label: 'root',
        top: true,
        children: list
      }
      this.treeData = [topItem]
    },
  }
}
</script>